import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import axios from '../api'
import xyz from './xyz'

import echarts from 'echarts';

export default class River extends Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {},
      grid: { top: 40, bottom: 40, left: 60, right: 60 },
    };
  }

  componentWillMount () {
    echarts.registerTheme('xyz', xyz);
  }

  componentDidMount () {
    this.tick()
    this.timerID = setInterval(
      () => this.tick(),
      15 * 60 * 1000
    );
  }

  componentWillUnmount () {
    clearInterval(this.timerID);
  }

  tick () {
    axios.get('/card_type').then(({ data: { data } }) => {
      this.genData(data)
    })
  }

  genData (data) {
    const colors = ['#00E2CE', '#958BFE', '#FED100', '#F16488', '#5181FF']
    const series = data.map((item, idx) => ({
      type: 'line', stack: '总量',symbol:'circle',showSymbol:true,symbalSize:3,
      areaStyle: {
        opacity: 0.3,
        color: {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: idx < 5 ? colors[idx] : '' },
            { offset: 1, color: '#040e29' }],
        }
      },
      itemStyle: { color: idx < 5 ? colors[idx] : '' },
      name: item.name, data: item.data.map(([name, value]) => ({ name, value }))
    }))
    const names = data[0].data.map(([name]) => name)
    const option = {
      legend:{},
      xAxis: { type: 'category',name:'时间', data: names, splitLine: { show: false },nameTextStyle:{color:'#fff'} },
      yAxis: { type: 'value', name:'百分比',nameTextStyle:{color:'#fff'} },
      series
    }
    this.setState({ option })
  }

  render () {
    return (
      <ReactEcharts
        option={this.state.option}
        notMerge={true}
        lazyUpdate={true}
        style={{ height: '100%' }}
        theme={'xyz'} />
    )
  }
}